<template>
  <div class="recordDetail">
    <Navbar :appTitle="title" />
    <!--头部-->
    <div class="d-head">
      <div class="content">
        <div class="left">
          <div class="title">{{ detailInfo.warehouseCodeName }}</div>
          <div class="row">
            <span class="r-label">盘点单号：</span>
            <span class="r-column">{{ detailInfo.inventoryCode || "--" }}</span>
          </div>
          <div class="row">
            <span class="r-label">盘点人：</span>
            <span class="r-column">{{ detailInfo.inventoryUser || "--" }}</span>
          </div>
          <div class="row">
            <span class="r-label">盘点开始时间：</span>
            <span class="r-column">{{ detailInfo.createTime || "--" }}</span>
          </div>
          <div class="row">
            <span class="r-label">盘点结束时间：</span>
            <span class="r-column">{{ detailInfo.updateTime || "--" }}</span>
          </div>
          <div class="status" style="margin-right: 0.1rem">
            {{ detailInfo.inventoryTypeTxt }}
          </div>
          <div class="status" v-if="detailInfo.flowStatusText">
            {{ detailInfo.flowStatusText }}
          </div>
        </div>
        <div class="right">
            <img  class="rightImg" v-if="detailInfo.flowStatus == 'RUNNING'" src="@/assets/img/shenpizhong.png" alt="">
            <img  class="rightImg" v-if="detailInfo.flowStatus == 'AGREE'" src="@/assets/img/yitongguo.png" alt="">
            <img  class="rightImg" v-if="detailInfo.flowStatus == 'REFUSE'" src="@/assets/img/yijujue.png" alt="">
            <img  class="rightImg" v-if="detailInfo.flowStatus == 'TERMINATED'" src="@/assets/img/yichehui.png" alt="">
        </div>
      </div>
    </div>
    <!-- taps-->
    <div class="tabs-f" style="width: 100% !important">
      <van-tabs v-model="active" style="width: 100%; margin: 0 0 0rem 0rem" >
        <!--基本信息 -->
        <van-tab title="全部" style="width: 100%">
          <!-- 盘点物品选择 -->
          <div class="goodsWrap" :style="{height: $route.query.applyType == 'waiterDeal' ? 'calc(65vh - 0.7rem)' : '65vh'}">
            <div class="goodsList" v-if="allList.length > 0">
              <div
                class="goodsBox"
                v-for="(item, index) in allList"
                :key="index"
              >
                <p class="title">盘点物品({{ index + 1 }})</p>
                <div class="content">
                  <div class="left">
                    <img :src="getimgUrl(item.goodsId)" alt="" />
                  </div>
                  <div class="right">
                    <div class="top">
                      <p class="code">
                        {{ item.goodsCode }}｜{{ item.goodsName }}｜{{
                          item.spec
                        }}
                      </p>
                    </div>
                    <div class="btn">
                      <div>
                        <p class="key">账面合格品</p>
                        <p class="val">
                          {{ item.goodsQualifiedNum }}{{ item.assistUnit }}
                        </p>
                      </div>
                      <div>
                        <p class="key">账面报废品</p>
                        <p class="val">
                          {{ item.goodsScrapNum }}{{ item.assistUnit }}
                        </p>
                      </div>

                      <div>
                        <p class="key">账面合格品(F)</p>
                        <p class="val">
                          {{ item.goodsQualifiedNumTextAssistUnit || '--' }}
                        </p>
                      </div>
                      <div>
                        <p class="key">账面报废品(F)</p>
                        <p class="val">
                          {{ item.goodsScrapNumTextAssistUnit || '--' }}
                        </p>
                      </div>

                      <div>
                        <p class="key">盘点合格品</p>
                        <p class="val" :style="{ color: setColor(item) }">
                          {{ item.inventoryGoodsQualifiedNum || 0
                          }}{{ item.assistUnit }}
                        </p>
                      </div>
                      <div>
                        <p class="key">盘点报废品</p>
                        <p class="val" :style="{ color: setColor2(item) }">
                          {{ item.inventoryGoodsScrapNum || 0
                          }}{{ item.assistUnit }}
                        </p>
                      </div>

                      <div>
                        <p class="key">盘点合格品(F)</p>
                        <p class="val" :style="{ color: setColor(item) }">
                          {{
                            item.inventoryGoodsQualifiedNumTextAssistUnit ||
                            "--"
                          }}
                        </p>
                      </div>
                      <div>
                        <p class="key">盘点报废品(F)</p>
                        <p class="val" :style="{ color: setColor2(item) }">
                          {{ item.inventoryGoodsScrapNumTextAssistUnit || "--" }}
                        </p>
                      </div>
                    </div>
                    <div class="pandianBox">
                      <div class="status">{{ item.statusText }}</div>
                    </div>
                    <div
                      class="pandianResult"
                      v-if="item.statusText == '盘点异常'"
                    >
                      盘点结果:{{ item.inventoryResult }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="detailInfo.flowInstId" class="otherMargin"></div>
            <div v-if="detailInfo.flowInstId">
              <!-- ids="WMS_WAREHOUSE_INVENTORY" -->
              <Examine type="2" :id="detailInfo.flowInstId" ref="examine" />
            </div>
          </div>
        </van-tab>
        <!--客户联系人 -->
        <!-- <div
          v-if="
            detailInfo.isInputContacts == 'yes' &&
            detailInfo.isInputInvoice == 'no'
          "
          style="height: 1.5rem; background: #f5f5f5"
        ></div> -->
        <van-tab>
          <template #title>盘点异常库存（{{ tabAbNormal }}）</template>
          <!-- 盘点异常物品 -->
          <div class="goodsWrap" :style="{height: $route.query.applyType == 'waiterDeal' ? 'calc(65vh - 0.7rem)' : '65vh'}">
            <div class="goodsList" v-if="abnormalList.length > 0">
              <div
                class="goodsBox"
                v-for="(item, index) in abnormalList"
                :key="index"
              >
                <p class="title">盘点物品({{ index + 1 }})</p>
                <div class="content">
                  <div class="left">
                    <img :src="getimgUrl(item.goodsId)" alt="" />
                  </div>
                  <div class="right">
                    <div class="top">
                      <p class="code">
                        {{ item.goodsCode }}｜{{ item.goodsName }}｜{{
                          item.spec
                        }}
                      </p>
                      <!-- <img
                        @click="toChangeNum(item)"
                        src="../../../assets/diandian.png"
                        alt=""
                      /> -->
                    </div>
                    <div class="btn">
                      <div>
                        <p class="key">账面合格品</p>
                        <p class="val">
                          {{ item.goodsQualifiedNum }}{{ item.assistUnit }}
                        </p>
                      </div>
                      <div>
                        <p class="key">账面报废品</p>
                        <p class="val">
                          {{ item.goodsScrapNum }}{{ item.assistUnit }}
                        </p>
                      </div>
                      <div>
                        <p class="key">账面合格品(F)</p>
                        <p class="val">
                          {{ item.goodsQualifiedNumTextAssistUnit || '--' }}
                        </p>
                      </div>
                      <div>
                        <p class="key">账面报废品(F)</p>
                        <p class="val">
                          {{ item.goodsScrapNumTextAssistUnit || '--' }}
                        </p>
                      </div>
                      <div>
                        <p class="key">盘点合格品</p>
                        <p class="val" :style="{ color: setColor(item) }">
                          {{ item.inventoryGoodsQualifiedNum || 0
                          }}{{ item.assistUnit }}
                        </p>
                      </div>
                      <div>
                        <p class="key">盘点报废品</p>
                        <p class="val" :style="{ color: setColor2(item) }">
                          {{ item.inventoryGoodsScrapNum || 0
                          }}{{ item.assistUnit }}
                        </p>
                      </div>
                      <div>
                        <p class="key">盘点合格品(F)</p>
                        <p class="val" :style="{ color: setColor(item) }">
                          {{
                            item.inventoryGoodsQualifiedNumTextAssistUnit ||
                            "--"
                          }}
                        </p>
                      </div>
                      <div>
                        <p class="key">盘点报废品(F)</p>
                        <p class="val" :style="{ color: setColor2(item) }">
                          {{ item.inventoryGoodsScrapNumTextAssistUnit || '--' }}
                        </p>
                      </div>
                    </div>
                    <div class="pandianBox">
                      <div class="status">{{ item.statusText }}</div>
                    </div>
                    <div class="pandianResult">
                      盘点结果:{{ item.inventoryResult }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="detailInfo.flowInstId" class="otherMargin"></div>
            <div v-if="detailInfo.flowInstId">
              <!-- ids="WMS_WAREHOUSE_INVENTORY" -->
              <Examine type="2" :id="detailInfo.flowInstId" ref="examine" />
            </div>
          </div>
        </van-tab>
        <van-tab>
          <template #title>盘点正常库存（{{ tabNormal }}）</template>
          <!-- 盘点正常物品 -->
          <div class="goodsWrap" :style="{height: $route.query.applyType == 'waiterDeal' ? 'calc(65vh - 0.7rem)' : '65vh'}">
            <div class="goodsList" v-if="normalList.length > 0">
              <div
                class="goodsBox"
                v-for="(item, index) in normalList"
                :key="index"
              >
                <p class="title">盘点物品({{ index + 1 }})</p>
                <div class="content">
                  <div class="left">
                    <img :src="getimgUrl(item.goodsId)" alt="" />
                  </div>
                  <div class="right">
                    <div class="top">
                      <p class="code">
                        {{ item.goodsCode }}｜{{ item.goodsName }}｜{{
                          item.spec
                        }}
                      </p>
                      <!-- <img
                        @click="toChangeNum(item)"
                        src="../../../assets/diandian.png"
                        alt=""
                      /> -->
                    </div>
                    <div class="btn">
                      <div>
                        <p class="key">账面合格品</p>
                        <p class="val">
                          {{ item.goodsQualifiedNum }}{{ item.assistUnit }}
                        </p>
                      </div>
                      <div>
                        <p class="key">账面报废品</p>
                        <p class="val">
                          {{ item.goodsScrapNum }}{{ item.assistUnit }}
                        </p>
                      </div>
                      <div>
                        <p class="key">账面报废品(F)</p>
                        <p class="val">
                          {{ item.goodsScrapNumTextAssistUnit || '--' }}
                        </p>
                      </div>
                      <div>
                        <p class="key">盘点合格品</p>
                        <p class="val" :style="{ color: setColor(item) }">
                          {{ item.inventoryGoodsQualifiedNum || 0
                          }}{{ item.assistUnit }}
                        </p>
                      </div>
                      <div>
                        <p class="key">盘点合格品</p>
                        <p class="val" :style="{ color: setColor(item) }">
                          {{ item.inventoryGoodsQualifiedNum || 0
                          }}{{ item.assistUnit }}
                        </p>
                      </div>
                      <div>
                        <p class="key">盘点报废品</p>
                        <p class="val" :style="{ color: setColor2(item) }">
                          {{ item.inventoryGoodsScrapNum || 0
                          }}{{ item.assistUnit }}
                        </p>
                      </div>
                      <div>
                        <p class="key">盘点合格品(F)</p>
                        <p class="val" :style="{ color: setColor(item) }">
                          {{
                            item.inventoryGoodsQualifiedNumTextAssistUnit ||
                            "--"
                          }}
                        </p>
                      </div>
                      <div>
                        <p class="key">盘点报废品(F)</p>
                        <p class="val" :style="{ color: setColor2(item) }">
                          {{ item.inventoryGoodsScrapNumTextAssistUnit || '--' }}
                        </p>
                      </div>
                    </div>
                    <div class="pandianBox">
                      <div class="status">{{ item.statusText }}</div>
                    </div>
                    <!-- <div class="pandianResult">盘点结果:{{item.inventoryResult }}</div> -->
                  </div>
                </div>
              </div>
            </div>
            <div v-if="detailInfo.flowInstId" class="otherMargin"></div>
            <div v-if="detailInfo.flowInstId">
              <!-- ids="WMS_WAREHOUSE_INVENTORY" -->
              <Examine type="2" :id="detailInfo.flowInstId" ref="examine" />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!--提交按钮 -->
    <div v-if="$route.query.applyType == 'waiterDeal'" class="search-bottom">
      <span class="btncancel" @click="cancel">拒绝</span>
      <span class="btnconfirm" @click="confirm">同意</span>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import Examine from "@/components/examine";
import { getAction, postAction } from "@/api/manage";
import { apiBaseUrlDownload } from "@/utils/request";
import { APILX } from "@/api/requestLx";
const getFileListByIds = (params) =>
  getAction("/sys/common/getFileListByIds", params);
export default {
  name: "customerDetail", //客户详情
  components: { Navbar, Examine },
  data() {
    return {
      abnormalList: [],
      normalList: [],
      allList: [],
      tabAbNormal: "0",
      tabNormal: "0",
      active: 0,
      detailInfo: {},
      title: this.$route.meta.title,
      fileIds: "",
      imgUrlList: [],
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.getDetail();
    this.getTable("abnormal");
    this.getTable("normal");
    this.getTable();
  },
  methods: {
    cancel() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 0, taskId: this.$route.query.taskId },
      });
    },
    confirm() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 1, taskId: this.$route.query.taskId },
      });
    },
    // 获取详情
    getDetail() {
      let id = this.$route.query.id;
      //   let id = "1517028753530834945"; //都有
      APILX.warehouseInventoryGetContinueInventoryInfo(id).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result;
        } else {
          this.$toast(res.result);
        }
      });
    },
    getTable(tabStatus) {
      let param = {
        id: this.$route.query.id,
        // id: "1517028753530834945",
        status: tabStatus,
        pageNo: "1",
        pageSize: "9999",
      };
      (this.abnormalList = []),
        (this.normalList = []),
        (this.allList = []),
        APILX.getWmsInventoryGoodsList(param).then((res) => {
          if (res.code == 200) {
            this.listData(res.result.records);
            let tableData = res.result.records;
            if (param.status == "abnormal") {
              this.tabAbNormal = res.result.total;
              this.abnormalList = tableData;
            } else if (param.status == "normal") {
              this.tabNormal = res.result.total;
              this.normalList = tableData;
            } else {
              this.allList = tableData;
            }
          } else {
            this.$toast(res.message);
          }
        });
    },
    getimgUrl(v) {
      let itemObj = {};
      for (let item of this.imgUrlList) {
        if (item.id == v) {
          itemObj = item;
        }
      }
      return itemObj.url;
    },
    //获取图片地址
    async listData(v) {
      console.log(v, "列表所有数据2");
      for (let i = 0; i < v.length; i++) {
        await getFileListByIds({ ids: v[i].attachment }).then((res) => {
          if (res.code == 200) {
            if (res.result.length > 0) {
              this.imgUrlList.push({
                url: `${apiBaseUrlDownload}jksaas-mgt/mgt/${res.result[0].uri}`,
                id: v[i].goodsId,
              });
            } else {
              this.imgUrlList.push({
                url: require("../../../assets/img/noPicture.jpg"),
                id: v[i].goodsId,
              });
            }
          } else {
          }
        });
      }
    },
    setColor(item) {
      if (
        Number(item.inventoryGoodsQualifiedNum) > Number(item.goodsQualifiedNum)
      ) {
        return "#ff4d4f";
      } else {
        return "#00b042";
      }
    },
    setColor2(item) {
      if (Number(item.inventoryGoodsScrapNum) > Number(item.goodsScrapNum)) {
        return "#ff4d4f";
      } else {
        return "#00b042";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/views/workManagement/materialRequisition/materialDetail.scss";
.content {
  margin-left: 0 !important;
}
// 盘点物品样式
.goodsWrap {
  // margin-top: -0.1rem;
  //   不换行
  // white-space: nowrap;
  overflow: scroll;
  height: 65vh;
  //   height: 4.9rem;
  .goodsList {
    .total {
      background: #f5f8ff;
      padding: 0.15rem;
      color: #888888;
      font-size: 0.14rem;
      margin-bottom: -0.1rem;
    }
    .goodsBox {
      background: #fff;
      margin-top: 0.1rem;
      .title {
        color: #191f25;
        font-weight: bold;
        font-size: 0.16rem;
        border-bottom: 1px solid #f5f5f5;
        padding: 0.15rem;
        margin: 0;
        margin-bottom: 0.16rem;
      }
      .content {
        display: flex;
        padding: 0.15rem;
        border-bottom: 1px solid #f5f5f5;
        .left {
          img {
            width: 0.55rem;
            height: 0.55rem;
            border-radius: 0.05rem;
          }
        }
        .right {
          width: 2.8rem;
          margin-left: 0.15rem;
          .top {
            display: flex;
            font-size: 0.16rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #191f25;
            .code {
              width: 2.8rem;
              margin-bottom: 0.08rem;
              word-break: break-word; /* 文本行的任意字内断开 */

              word-wrap: break-word; /* IE */

              white-space: -moz-pre-wrap; /* Mozilla */

              white-space: -hp-pre-wrap; /* HP printers */

              white-space: -o-pre-wrap; /* Opera 7 */

              white-space: -pre-wrap; /* Opera 4-6 */

              white-space: pre; /* CSS2 */

              white-space: pre-wrap; /* CSS 2.1 */

              white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
            }
            img {
              height: 0.18rem;
              margin-top: 0.03rem;
              //   float: right;
            }
          }
          .btn {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            div {
              width: 50%;
              .key {
                font-size: 0.14rem;
                color: #8888;
                margin-bottom: 0.05rem;
              }
              .val {
                color: #191f25;
                font-size: 0.16rem;
                margin-bottom: 0.05rem;
              }
            }
          }
        }
      }
    }
  }
  .addgoods {
    background: #fff;
    font-size: 0.16rem;
    text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;
  }
}
.left {
  width: 3.4rem !important;
}
.recordDetail {
  position: relative;
}
.tabs-f {
  position: relative;
  top: 2.2rem;
  width: 100%;
}
// /deep/ .van-tabs__nav{
//     height: 0.44rem;
//     width: 100%;
// }
.van-tab__pane {
  //     position: fixed;
}
.row {
  margin-top: 0.1rem !important;
}
/deep/ .van-tabs__nav {
  left: -35px;
}
/deep/ .van-tabs__wrap {
  background: #fff;
}
div.pandianBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  top: -0.06rem;
}

div.pandianResult {
  font-size: 0.11rem;
  margin-top: 0.02rem;
  color: #ff6c6c;
}
</style>
